<!--
 * @Descripttion: ---
 * @version: v1.0.0.0
 * @Author: 任飞
 * @Date: 2020-06-04 10:24:04
 * @LastEditors: 任飞
 * @LastEditTime: 2020-06-16 11:44:28
--> 
<template>
  <div class="document-editor">
    <div class="document-editor__toolbar"/>
    <div class="document-editor__editable-container">
      <div class="document-editor__editable">
        <ckeditor :value="editorData" :editor="editor" :config="editorConfig" @ready="onReady" @input="onEditorInput" @blur="handleBlur"/>
      </div>
    </div>
  </div>
</template>
<script>
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document'
import { getToken } from '@/utils/auth'
export default {
  props: {
    content: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      middleData: this.content,
      editor: DecoupledEditor,
      editorData: "......",
      editorConfig: {
        ckfinder: {
          uploadUrl: process.env.BASE_API + '/admin/v1/upload/image',
          headers: {
            'Admin-Token': getToken()
          }
        }
      },
    }
  },
  watch: {
    content: function(val) {
      this.middleData = val
    }
  },
  created() {},
  mounted() {
    // console.log(this.editorData)
  },
  methods: {
    onReady(editor) {
      // Insert the toolbar before the editable area.
      editor.ui.getEditableElement().parentElement.insertBefore(
        editor.ui.view.toolbar.element,
        editor.ui.getEditableElement()
      )
      this.editorData = this.middleData
    },
    onEditorInput(e) {
      this.editorData = e
    },
    handleBlur() {
      this.$emit('update-editor', this.editorData)
    }
  }
}
</script>
<style lang='less' scoped>
.document-editor {
    border: 1px solid var(--ck-color-base-border);
    border-radius: var(--ck-border-radius);
    // width: 1015px;
    max-width: 1080px;
    width: 100%;
    /* Set vertical boundaries for the document editor. */

    /* This element is a flex container for easier rendering. */
    display: flex;
    flex-flow: column nowrap;
}
@media (min-width: 1600px) { 
  .document-editor {
    width: 1080px;
    margin: 0 auto;
  }
}
.ck.ck-toolbar {
  border: none
}
/* Make the editable container look like the inside of a native word processor application. */
.document-editor__editable-container {
    background: #efefef;
    // overflow-y: scroll;

    /* Make it possible to scroll the "page" of the edited content. */
    // overflow-y: scroll;
}

.document-editor__toolbar {
    /* Make sure the toolbar container is always above the editable. */
    z-index: 1;

    /* Create the illusion of the toolbar floating over the editable. */
    box-shadow: 0 0 5px hsla( 0,0%,0%,.2 );

    /* Use the CKEditor CSS variables to keep the UI consistent. */
    border-bottom: 1px solid var(--ck-color-toolbar-border);
}

/* Adjust the look of the toolbar inside the container. */
.document-editor__toolbar .ck-toolbar {
    border: 0;
    border-radius: 0;
}

.document-editor__editable-container .ck-editor__editable {
    /* Set the dimensions of the "page". */
    // width: 21cm;
    min-height: 11cm;
    max-height: 21cm;

    /* Keep the "page" off the boundaries of the container. */

    border-radius: var(--ck-border-radius);
    background: white;

    /* The "page" should cast a slight shadow (3D illusion). */
    padding: 2cm 1.2cm;
    border: 1px #d3d3d3 solid;
    box-shadow: 0 0 5px rgba(0,0,0,.1);
    /* Center the "page". */
    margin: 1.2cm auto;
    margin-bottom: 0;
}

.document-editor .ck-content h2,
.document-editor .ck-heading-dropdown .ck-heading_heading1 .ck-button__label {
    font-size: 2.18em;
    font-weight: normal;
}

.document-editor .ck-content h2 {
    line-height: 1.37em;
    padding-top: .342em;
    margin-bottom: .142em;
}

.document-editor .ck-content h3,
.document-editor .ck-heading-dropdown .ck-heading_heading2 .ck-button__label {
    font-size: 1.75em;
    font-weight: normal;
    color: hsl( 203, 100%, 50% );
}

.document-editor .ck-heading-dropdown .ck-heading_heading2.ck-on .ck-button__label {
    color: var(--ck-color-list-button-on-text);
}

.document-editor .ck-content h3 {
    line-height: 1.86em;
    padding-top: .171em;
    margin-bottom: .357em;
}

.document-editor .ck-content h4,
.document-editor .ck-heading-dropdown .ck-heading_heading3 .ck-button__label {
    font-size: 1.31em;
    font-weight: bold;
}

.document-editor .ck-content h4 {
    line-height: 1.24em;
    padding-top: .286em;
    margin-bottom: .952em;
}

/* Set the styles for "Paragraph". */

.document-editor /deep/ .ck-content p {
    // font-size: 1.2em;
    line-height: 1.5em;
    margin-bottom: 1.5em;
    margin-top: 1.5em;
}
.document-editor /deep/ .ck-content .image>figcaption {
    display: table-caption;
    caption-side: bottom;
    word-break: break-word;
    color: #333;
    background-color: #f7f7f7;
    padding: .6em;
    font-size: .75em;
    outline-offset: -1px;
}
</style>